import React from 'react'
import Menu from '@/components/Menu'
import { sleep } from 'antd-mobile/es/utils/sleep'


const Home = () => {
  //数据定义
  let [keywords, SetKeywords] = React.useState('')
  let [page, SetPage] = React.useState(1)
  let [room, SetRoom] = React.useState([])
  let [hasMore, SethasMore] = React.useState(true)
  let [coupon, SetCoupon] = React.useState([])

  // 请求优惠卷的活动信息
  const CouponRequest = async () => {
    var result = await React.HTTP.post('/coupon/index', {})

    if (result.code == 1) SetCoupon(result.data)

  }

  // 跳转优惠卷详情界面
  const CouponInfo = async (cid: number, e: any) => React.navigate(`/coupon/info?cid=${cid}`)

  // 钩子函数
  React.useEffect(() => {
    CouponRequest() //请求优惠卷的活动信息
  }, [])

  // 优惠卷轮播图输出
  const SwiperView = () => {
    if (coupon.length <= 0) {
      return (<></>)
    }

    return (
      <React.UI.Swiper loop autoplay>
        {coupon.map((item: any, key: number) => (
          <React.UI.Swiper.Item key={key} onClick={CouponInfo.bind(this, item.id)}>
            <React.UI.Image src={item.thumb_text} width={'100%'} height={'200px'} fit='cover' />
          </React.UI.Swiper.Item>
        ))}
      </React.UI.Swiper>
    )
  }

  // 关键词搜索
  const search = (e: any) => {
    //阻止元素的默认功能
    e.preventDefault()

    //直接触发下拉刷新
    onRefresh()
  }

  //下拉刷新的方法
  const onRefresh = async () => {
    SetPage(1)
    SetRoom([])
    SethasMore(true)

    await sleep(1000)
    await request()
  }

  //上拉加载方法
  const loadMore = async () => {
    request()
  }

  //房源数据请求
  const request = async () => {
    var result = await React.HTTP.post('/room/index', { page, keywords })

    if (result.code == 0) {
      SethasMore(false)
      return false
    } else {
      //设置分页和数据部分
      SethasMore(true)
      SetPage(page + 1)
      SetRoom(room.concat(result.data))
    }
  }

  return (
    <>
      <div className="top"><div>首页</div></div>

      {/* 轮播图 */}
      <SwiperView />

      {/* 关键词搜索 */}
      <form className="hotel_search" onSubmit={search}>
        <input type="text" placeholder="请输入关键词搜索" value={keywords} onChange={(e) => SetKeywords(e.target.value)} />
        <div className="screen_icon">
          <img src="/assets/images/screen.png" alt="" />
        </div>
      </form>

      {/* 下拉刷新 */}
      <React.UI.PullToRefresh onRefresh={onRefresh}>
        <div className="hotellist">
          {
            room.map((item: any, key: number) =>
              <div className="item" key={key}>
                <React.Router.Link to={`/room/info?rid=${item.id}`}>
                  <div className="images">
                    <div className="swipers">
                      <img src={item.thumb_text} />
                    </div>
                    <div className="title">{item.name}</div>
                  </div>

                  <div>
                    <div className="item_top">
                      {item.flag_text && item.flag_text.map((flag: string, index: number) => <span key={index}>{flag}</span>)}
                    </div>

                    <div className="item_bot">
                      <div className="font">
                        <span className="price">￥{item.price}/晚</span>
                      </div>
                      <div className="btn">立即预定</div>
                    </div>
                  </div>
                </React.Router.Link>
              </div>
            )
          }

        </div>
      </React.UI.PullToRefresh>

      {/* 上拉加载 */}
      <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />

      <Menu />
    </>
  )
}

export default Home
